<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>权限管理</el-breadcrumb-item>
         <el-breadcrumb-item>角色列表</el-breadcrumb-item>
       </el-breadcrumb>

       <el-card>
           <el-row>
               <el-col>
                   <el-button type="primary">添加角色</el-button>
               </el-col>
           </el-row>

           <el-table :data="roleList" border stripe>
               <!--展开列-->
               <el-table-column type="expand">
                   <template slot-scope="scope">
                       <!-- <pre>
                            {{scope.row}}

                       </pre>-->
                      <el-row  :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
                          <!--渲染一级权限-->
                          <el-col :span="5">
                              <el-tag closable @close="removeRightById(scope.row,item1.id)">
                                   {{item1.authName}}
                              </el-tag>
                             <i class="el-icon-caret-right"></i>
                          </el-col>
                          <!--渲染二、三级权限-->
                          <el-col :span="19">
                              <!--通过for循环嵌套渲染二级权限-->
                                <el-row :class="[i2 === 0 ? '' : 'bdtop','vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id">
                                    <el-col :span="6">
                                      <el-tag type="success" closable @close="removeRightById(scope.row,item2.id)">
                                       {{item2.authName}}
                                       </el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                     <el-col :span="18">
                                        <el-tag type="warning" v-for="(item3,i3) in item2.children" :key="item3.id" closable @close="removeRightById(scope.row,item3.id)">

                                             {{item3.authName}}
                                        </el-tag>
                                     </el-col>
                                </el-row>
                          </el-col>

                      </el-row>
                      
                    </template>
               </el-table-column>
               <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作"  width="300px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-edit" size="mini">删除</el-button>
                        <el-button type="warning" icon="el-icon-edit" size="mini" @click="showSettingRightDialog()">分配</el-button>
                    </template>
                </el-table-column>

           </el-table>
       </el-card>
       <el-dialog title="分配权限"  :visible.sync="showSettingRight"  width="50%">
           <el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all></el-tree>
         
         <span slot="footer" class="dialog-footer">
           <el-button @click="showSettingRight = false">取 消</el-button>
           <el-button type="primary" @click="showSettingRight = false">确 定</el-button>
         </span>
        </el-dialog>

</div>  
</template>
<script>
export default {
    data(){
        return{
            roleList:[],
            //控制分配权限对话框的显示与隐藏
            showSettingRight:false,
            //权限列表
            rightslist:[],
            treeProps:{
                label:'authName',
                children:'children'
            }
        }
    },
    created(){
        this.getRoleList()
    },
    methods:{
       async getRoleList(){
            const{data:res}=await this.$http.get('roles');
            if(res.meta.status!=200){
                return this.$message.error('获取角色列表失败');
            }
            this.roleList=res.data;
        },
        //根据id删除对应权限
        async removeRightById(role,rightId){
           const confirmResult=await  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)

        if(confirmResult!=='confirm'){
            return this.$message.info('取消了删除')
        }
        //console.log('确认了删除')
       const{data:res}= await this.$http.delete(`roles/${role.id}/rights/${rightId}`);
       if(res.meta.status!==200){
           return this.$message.error('删除失败')
       }
      // this.getRoleList();
      role.children=res.data;
        },
        async showSettingRightDialog(){
            //获取所有权限的数据
            const {data:res}=await this.$http.get('rights/tree')
            if(res.meta.status!==200){
              return this.$message.error('数据获取失败')
            }
            this.rightslist=res.data;
            console.log(this.rightslist)
            this.showSettingRight=true
        }
    }
}
</script>
<style lang="less" scoped>
.el-tag{
    margin:7px;
}
.bdtop{
    border-top:1px solid #eee;
}
.bdbottom{
     border-bottom:1px solid #eee;
}
.vcenter{
    display:flex;
    align-items:center;
}
</style>